<template>
  <div class="detail"  @scroll="scrollEvent" ref="detail">
    <div class="middle">
      <div
        class="middle-hidden-top-bar-1"
        ref="middle-hidden-top-bar-1"
      >
        <div class="left-area">
          <span
            class="back"
            @click="goBack"
          ></span>
          <span
            class="icon"
            :style="{
              background: `url(${detailData.app_icon}) center center / cover no-repeat`
            }"
          ></span>
          <span class="name">{{ detailData.app_name ? detailData.app_name : '默认名称' }}</span>
        </div>
        <div class="right-area">
          <span
            class="download-btn"
            @click="detailData.download_url ? window.open(detailData.download_url, '_blank') : ''"
          >下载</span>
        </div>
      </div>
      <div
        class="top-bar-bg"
        ref="top-bar-bg"
        :style="{
          backgroundImage: `url(${detailData.app_big_img})`
        }"
      ></div>
      <detail-banner
        :detailData="detailData"
        ref="banner"
      ></detail-banner>
      <detail-description
        :detailData="detailData"
      ></detail-description>
      <div class="tab-area">
        <el-tabs
          stretch
          ref="tabs"
          height="60px"
        >
          <el-tab-pane label="详情">
            <detail-app-info :detailData="detailData"></detail-app-info>
          </el-tab-pane>
          <el-tab-pane label="评论">
            <span slot="label">
              评论
              <i>{{ commentData.length > 0 ? commentData.length : 0 }}</i>
            </span>
            <detail-comment
              :commentData="commentData"
              @reloadComment="handleReloadComment"
            ></detail-comment>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <right-content></right-content>
  </div>
</template>

<script>
  import DetailBanner from './banner'
  import DetailDescription from './description'
  import DetailAppInfo from './appInfo.vue'
  import DetailComment from './comment.vue'
  import { getDetail, getComment } from '@/network/detail'
  import RightContent from '@/components/content/rightContent/RightContent'
  export default {
    components: { DetailBanner, RightContent, DetailDescription, DetailAppInfo, DetailComment },
    name: 'Detail',
    data () {
      return {
        detailData: {},
        commentData: [],
        app_id: this.$route.params.id,
        user_id: window.localStorage.getItem('user_id'),
        // 控制头部样式
        isShowTopBar_1: false,
        window
      }
    },
    created () {
      this.loadDetail()
    },
    mounted () {
      window.addEventListener('scroll', this.scrollEvent)
      this.$refs['middle-hidden-top-bar-1'].setAttribute('style', `
        left: ${this.$refs['banner'].$refs['banner'].getBoundingClientRect().left - 10}px;
      `)
      this.$refs['top-bar-bg'].setAttribute('style', `
        left: ${this.$refs['banner'].$refs['banner'].getBoundingClientRect().left - 10}px;
      `)
    },
    beforeDestroy () {
      window.removeEventListener('scroll', this.scrollEvent)
    },
    methods: {
      // 加载详情信息
      async loadDetail () {
        // // 获取详情的 Promise
        const detailPromise = new Promise((resolve, reject) => {
          getDetail({
            app_id: this.app_id
          }).then(res => {
            if (res.code === 200) {
              resolve(res.data)
            } else {
              reject('error')
            }
          })
        })
        // // 获取评论的 Promise
        const commentPromise = new Promise((resolve, reject) => {
          getComment({
            app_id: this.app_id
          }).then(res => {
            if (res.code === 200) {
              resolve(res.data)
            } else {
              reject('error')
            }
          })
        })
        Promise.all([detailPromise, commentPromise]).then(res => {
          this.detailData = res[0]
          this.commentData = res[1]
        })
      },
      // 滚动监听，控制中间顶部的样式
      scrollEvent (e) {
        const bannerAnchor = {
          x: this.$refs['banner'].$refs['banner'].getBoundingClientRect().left,
          y: this.$refs['banner'].$refs['banner'].getBoundingClientRect().top
        }
        // console.log(window.scrollY, window.scrollX)
        // console.log(this.$refs['detail'].getBoundingClientRect().top)
        // console.log(this.$refs['banner'].$refs['banner'].getBoundingClientRect().top)
        // console.log(this.$refs['tabs'].$refs.nav.$el.getBoundingClientRect())
        // 顶部样式1：banner 完全消失时
        if (this.$refs['banner'].$refs['banner'].getBoundingClientRect().top <= -80) {
          if (!this.isShowTopBar_1) {
            this.$refs['middle-hidden-top-bar-1'].className += ' show'
            this.$refs['top-bar-bg'].className += ' show'
            this.isShowTopBar_1 = true
          }
        } else {
          if (this.isShowTopBar_1) {
            const className_1 = this.$refs['middle-hidden-top-bar-1'].className
            const className_2 = this.$refs['top-bar-bg'].className
            this.$refs['middle-hidden-top-bar-1'].className = className_1.substring(0, className_1.indexOf('show') - 1)
            this.$refs['top-bar-bg'].className = className_2.substring(0, className_2.indexOf('show') - 1)
            this.isShowTopBar_1 = false
          }
        }
      },
      // 后退跳转
      goBack () {
        console.log('后退')
        this.$router.go(-1)
      },
      async handleReloadComment () {
        const { code, data } = await getComment({
          app_id: this.app_id
        })
        if (code === 200) {
          this.commentData = data
        } else {
          this.$message({
            type: 'error',
            message: '操作失败！请联系管理员！'
          })
        }
      }
    },
    watch: {
      '$route.path': function (newVal) {
        console.log(newVal)
        if (!newVal.includes('/detail')) return
        this.app_id = this.$route.params.id
        this.loadDetail()
      }
    }
  }
</script>

<style lang="scss" scoped>
  $themeColor: #15C5CE;
  .detail {
    display: flex;
    width: 927px;
    .middle {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 600px;
      .middle-hidden-top-bar-1 {
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 580px;
        height: 0;
        z-index: 1999;
        backdrop-filter: blur(5px);
        background-color: rgba(0, 0, 0, .15);

        transition: all 500ms 0ms ease-in-out;
        overflow: hidden;
        &.show {
          height: 80px;
          padding: 10px;
        }
        .left-area {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .back {
            width: 24px;
            height: 24px;
            background: url(./images/arrow.svg) center center / cover no-repeat;
            transform: rotate(180deg);
            margin-left: 10px;
            cursor: pointer;
          }
          .icon {
            width: 32px;
            height: 32px;
            margin-left: 12px;
            border-radius: 6px;
          }
          .name {
            margin-left: 12px;
            color: #fff;
            font-weight: bold;
            font-size: 20px;
          }
        }
        .right-area {
          color: $themeColor;
          // border: 2px solid $themeColor;
          border-radius: 15px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          width: 64px;
          background-color: #fff;
          cursor: pointer;
        }
      }
      .top-bar-bg {
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 580px;
        height: 0;
        z-index: 1998;
        background-position: center bottom;
        transition: all 500ms 0ms ease-in-out;
        &.show {
          height: 80px;
        }
      }
    }
    .tab-area {
      padding: 10px;
      ::v-deep .el-tabs__item {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        color: #b1b1b1;
        &.is-active {
          color: #000;
          font-weight: bold;
          &:hover {
            color: #000;
          }
        }
        &:hover {
          color: #15C5CE;
        }
        i {
          font-style: normal;
          font-size: 14px;
          line-height: 60px;
        }
      }
      ::v-deep .el-tabs__active-bar {
        background-color: #15C5CE;
      }
    }
  }
</style>
